<template>
  <div class="describe">
    <div class="describe_middle">
      <div class="describe_top">病情描述(症状+持续时间+用药情况)</div>
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="留言"
          type="textarea"
          maxlength="500"
          show-word-limit
          placeholder="请输入"
        />
      </van-cell-group>
    </div>
    <div class="describe_bottom">
      <div class="describe_bottom_top">上传图片(化验单丶检验报告丶CT...)</div>
      <div class="describe_bottom_middle">
        <van-uploader
          :after-read="afterRead"
          v-model="fileList"
          multiple
          :max-count="5"
        />
      </div>
    </div>
    <div class="describe_tips">
      <div>
        <van-checkbox v-model="checked">
          授权平台获取和图片并提供相关的服务《用户授权协议》
        </van-checkbox>
      </div>
    </div>
    <div class="describe_submit">
      <van-button type="primary" size="large" @click="next">下一步</van-button>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, reactive, toRefs } from "vue";
import {Toast} from "vant";
import {route} from "vant/es/composables/use-route";
import axios from "axios";
export default {
  name: "describeCondition",
  setup() {
    const router = useRouter();
    const message = ref("");
    const data = reactive({
      fileList: [],
      checked: false,
    });

    function afterRead() {
      console.log("文件上传成功");
    }
    function next() {
      if (!data.checked) {
        Toast.fail("请同意授权平台获取和图片并提供相关的服务《用户授权协议》");
        return;
      }else {
        const options = {
          method: 'POST',
          url: 'http://106.54.189.155:6768/appointment/add',
          params: {
            appDoctorId: '',
            appPatientId: '',
            appointmentNeedId: '',
            appointmentType: '',
            departmentId: '',
            doctorName: '',
            id: '',
            illness: '',
            illnessFileIds: '',
            'illnessFileList[0].createTime': '',
            'illnessFileList[0].fileName': '',
            'illnessFileList[0].filePath': '',
            'illnessFileList[0].fileSize': '',
            'illnessFileList[0].id': '',
            'illnessFileList[0].operater': '',
            'illnessFileList[0].updateTime': '',
            isResult: '',
            patientName: '',
            shiftId: '',
            sort: ''
          },
          headers: {Accept: '*/*', 'Content-Type': 'application/json'}
        };
        this.departmentId = route.params.id;
        axios.request(options).then(response =>{
          console.log(response.data);
          router.push("/home/consultation/releaseSuccess");
        }).catch(function (error) {
          console.error(error);
          return;
        });
      }
    }
    return {
      active:2,
      message,
      afterRead,
      ...toRefs(data),
      next,
    };
  },
};
</script>

<style lang="scss" scope>
.describe {
  width: 100%;
  margin-top: 10px;
  &_submit {
    padding: 10px 15px;
  }
  &_tips {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 12px;
  }
  &_bottom {
    background-color: #fff;
    margin: 10px 0;
    width: 100%;
    padding: 10px 15px;
    background-color: #fff;
    &_middle {
      width: 100%;
      height: auto;
      & .van-icon-photograph:before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &_top {
      margin-bottom: 5px;
    }
  }
  &_middle {
    background-color: #fff;
    padding: 10px 15px;
    & .van-cell {
      padding: 0;
    }
    & .van-field__label {
      display: none;
    }
  }
  &_top {
    background-color: #fff;
    padding: 10px 0;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
